/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .options {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    .exercise {
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #6b400d;
      color: #ffcb24;
      transition: all 1s;
    }

    .trip {
      height: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffcb24;
      color: #6b400d;
      transition: all 1s;

      .tips {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .bg {
          position: absolute;
          top: 0;
          width: 100%;
        }
        .text {
          position: absolute;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          width: 100%;
          height: 100%;
          background: linear-gradient(to top, #ffcb24, rgba(255, 203, 36, 0));
          color: #fff;
          .first {
            margin-left: 10%;
          }
          .second {
            margin-left: 20%;
          }
          .third {
            margin-left: 30%;
          }
          .fouth {
            margin-left: 40%;
          }
          .fifth {
            margin-left: 50%;
          }
          .item {
            display: flex;
            align-items: center;
            position: relative;
            height: 30px;
            padding-left: 50px;
            font-size: 35rpx;
            .number {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              border: 1px solid #6b400d;
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
              position: absolute;
              left: 10px;
              top: 0;
              background-color: white;
              color: #6b400d;
            }
            .content {
              text-shadow: 
              -1px -1px 10px #000,  
              1px -1px 10px #000,
              -1px 1px 10px #000,
              1px 1px 10px #000; /* 边框颜色 */
            }
          }
          .btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 30rpx;
            .begin{
              display: flex;
              align-items: center;
              justify-content: center;
              width: 200rpx;
              height: 100rpx;
              background-color: #6b400d;
              border-radius: 30rpx;
              color: #fff;
              animation: flash 1s infinite; /* 应用动画 */
            }
            @keyframes flash {
              0%, 100% {
                transform: scale(1); /* 初始和结束状态，大小为原始大小 */
              }
              50% {
                transform: scale(1.2); /* 中间状态，大小放大到1.2倍 */
              }
            }
            .mouse {
              position: absolute;
              bottom: -25rpx;
              right: 50%;
              transform: translateX(100rpx);
              width: 50rpx;
              height: 50rpx;
            }
          }
        }
      }
    }
  }

  // .record {
  //   position: relative;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   width: 100rpx;
  //   height: 100rpx;
  //   padding: 20px;
  //   border-radius: 20rpx;
  //   font-size: 26rpx;
  //   box-shadow: 0rpx 0rpx 80rpx 150rpx #ffcc2449, inset 0 0 200rpx rgba(255, 204, 36, 0.569);
  //   background-color: #ffcc241a;
  //   color: #6b400d;
  //   border-radius: 50%;
  // }

  // .record:after {
  //     content: '点一下';
  //     display: inline-block;
  //     width: 100rpx;
  //     height: 100rpx;
  //     line-height: 100rpx;
  //     border-radius: 50%;
  //     text-align: center;
  //     color: #6b400d;
  //     font-size: 24rpx;
  // }

  // @keyframes rotating {
  //     0% {
  //         -webkit-transform: rotate(0deg);
  //     }

  //     100% {
  //         -webkit-transform: rotate(360deg);
  //     }
  // }

  // .round {
  //     transform: scale(1);
  //     opacity: 1;
  //     animation: rotating 10s 1.2s linear infinite;
  //     width: 0rpx;
  //     height: 0rpx;
  //     border: 1rpx dashed #6b400d;
  //     border-radius: 50%;
  //     position: absolute;
  //     transition: all 1s;
  //     span {
  //       width: 100rpx;
  //       height: 100rpx;
  //       line-height: 100rpx;
  //       display: inline-block;
  //       border-radius: 50%;
  //       text-align: center;
  //       position: absolute;
  //       color: #fff;
  //     }
  //     .add-move {
  //       right: -50rpx;
  //       top: 50%;
  //       margin-top: -22rpx;
  //       background: rgb(265, 100, 102);
  //       transform: translateY(-50%);
  //       box-shadow: 0rpx 0rpx 80rpx 20rpx #EF9CBA, inset 0 0 200rpx rgba(239, 156, 186, 0.5);
  //     }
  //     .add-trip {
  //       left: -50rpx;
  //       top: 50%;
  //       margin-top: -22rpx;
  //       transform: translateY(-50%);
  //       background-color: rgb(107, 64, 13);
  //       box-shadow: 0rpx 0rpx 80rpx 20rpx rgb(107, 64, 13), inset 0 0 200rpx rgba(107, 64, 13, 0.5);
  //     }
  // }



  //  span:nth-child(1) {
  //     right: -22rpx;
  //     top: 50%;
  //     margin-top: -22rpx;
  // }

  //  span:nth-child(2) {
  //     left: -22rpx;
  //     top: 50%;
  //     margin-top: -22rpx;
  // }

  //  span:nth-child(3) {
  //     left: 50%;
  //     bottom: -22rpx;
  //     margin-left: -22rpx;
  // }

  //  span:nth-child(4) {
  //     left: 50%;
  //     top: -22rpx;
  //     margin-left: -22rpx;
  // }

  .dialog {
    color: #6b400d;

    .content {
      z-index: 5001;
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 600rpx;
      border-radius: 30rpx;
      background-color: #eee;

      .freedom,
      .template {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 400rpx;
        padding: 50rpx;
        font-size: 40rpx;
        font-weight: 900;

        .tips {
          font-size: 25rpx;
          color: rgba($color: #000000, $alpha: 0.5);
        }
      }

      .freedom {
        border-bottom: 1px solid #6b410d7a;
      }
    }
  }

  @keyframes dialog-enter {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes dialog-leave {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

}